<template>
  <div class="shop">
      <div class="left">
			<el-menu class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#333">
				<el-submenu v-for="(item,index) in route" :key="index" @click="goLink(item)" :index="item.path">
					<template slot="title">
						<i :class="item.icon"></i>
						<span>{{item.name}}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item v-for="(itemc,indexc) in item.children" :key="indexc" @click="goLink(itemc)" :index="itemc.path">
							<span>{{itemc.name}}</span>
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      route:[
        {
          name:"BANANER设置",
          path:"/plus/bananer",
          icon:"el-icon-menu",

						children: [{
								name: "banner列表",
								path: "/plus/bananer",
								icon: "el-icon-menu"
							},
							{
								name: "新增banner",
								path: "/plus/addBanner",
								icon: "el-icon-menu"
							}
						]
        },
        {
          name:"区域文案编辑",
          path:"/plus/regionalCopywriting",
          icon:"el-icon-menu"
        }
      ]
    }
  },
  methods:{
    goLink(item){
      this.$router.push({path:item.path})
    }
  }
}
</script>
<style scoped>
  .shop{
    flex:1;
  }
  .left{
    width: 200px;
    background-color: #fff;
    overflow: hidden;
    height: 100%;
    border-right: 1px solid #f2f2f2;
    box-sizing: border-box;
  }
  .right{
    background-color: fff;
    overflow: hidden;
    padding: 0 24px;
    box-sizing: border-box;
    width: 1200px;
  }
  .shop{
    display: flex;
    flex-direction: row;
  }
</style>
